<%@page contentType="text/html;charset=utf-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Vizualizace přátel na Facebooku</title>
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script src="http://connect.facebook.net/en_US/all.js"></script>
        <script type="text/javascript">
            $(function() {
                $(".filtrPanel").hide();
                $(".filtrIcon").click(function() {
                    if ($(".filtrPanel:hidden").length > 0)
                        $(".filtrPanel").show();
                    else
                        $(".filtrPanel").hide();
                });
                $(".filtr").click(function(event) {
                    event.stopPropagation();
                });
                $("body").click(function() {
                    $(".filtrPanel").hide();
                });



                plusWplusoveOusko = 15;
                plusW = <c:out value="${((rectangleWidth)/2)}"/> + plusWplusoveOusko;
                plusH = <c:out value="${(rectangleHeight/2)}"/>;

                $(".friend").draggable({
                    start: function(event, ui) {
                        $(event.target.parentElement).append(event.target);
                    },
                    drag: function(event, ui) {
                        var x = ui.offset.left - $("#grafPratel").offset().left;
                        var y = ui.offset.top - $("#grafPratel").offset().top;
                        $(this).attr("transform", "translate(" + (x + (plusWplusoveOusko)) + ", " + y + ")");
                        $("." + $(this).attr('id') + "start").attr("x1", x + plusW);
                        $("." + $(this).attr('id') + "start").attr("y1", y + plusH);
                        $("." + $(this).attr('id') + "end").attr("x2", x + plusW);
                        $("." + $(this).attr('id') + "end").attr("y2", y + plusH);

                        $(this).css("position", "static");
                    }
                });


            });

            $(function() {
                $("#slider-range").slider({
                    range: true,
                    min: 12,
                    max: 99,
                    values: [<c:out value="${empty ageFrom ? '12' : ageFrom}"/>, <c:out value="${empty ageTo ? '99' : ageTo}"/>],
                    slide: function(event, ui) {
                        $("#ageRange").val(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
                        $(".vse_vek input[type='checkbox'][name='vse_vek']").removeAttr("checked");
                    }
                });
                $("#ageRange").val($("#slider-range").slider("values", 0) +
                        " - " + $("#slider-range").slider("values", 1));
            });


            $(function() {
                $(".vse_pohlavi input[type='checkbox']").change(function() {
                    var vse = $(this).val();
                    if (vse == 1) {
                        $("select[name='gender'] option").each(function(index) {
                            $(this).attr("selected", "selected");
                        });
                    }
                });

                $(".vse_pohlavi select").change(function() {
                    $(".vse_pohlavi input[type='checkbox'][name='vse_pohlavi']").removeAttr("checked");
                });
            });
            $(function() {
                $(".vse_skupiny input[type='checkbox']").change(function() {
                    var vse = $(this).val();
                    if (vse == 1) {
                        $("select[name='friendLists'] option").each(function(index) {
                            $(this).attr("selected", "selected");
                        });
                    }
                });

                $(".vse_skupiny select").change(function() {
                    $(".vse_skupiny input[type='checkbox'][name='vse_skupiny']").removeAttr("checked");
                });
            });

            FB.init({
                appId: '176786479143191',
                status: true, // check login status
                cookie: true, // enable cookies to allow the server to access the session
                xfbml: true  // parse XFBML
            });

            FB.Event.subscribe('auth.logout', function() {
                window.location = "${pageContext.request.contextPath}";
            });
            FB.getLoginStatus(function(response) {
                if (response.status !== 'connected') {
                    window.location = "${pageContext.request.contextPath}";
                }
            });


        </script>
    </head>
    <body>
        <div class="topRow">
            <div class="pageHead">
                <div class="logoutB">
                    <div class="logoutBtop">ODHLÁSIT SE</div>
                    <div style="position:absolute;left:0px;top:0px;width:100px;height:30px;overflow:hidden;z-index:333;opacity:0;filter:alpha(opacity=0);">
                        
                        <div id="fb-root"></div>   

                        <script type="text/javascript">
                            document.write('<fb:login-button show-faces="false" autologoutlink="true" width="150"></fb:login-button>');
                        </script>   
                    </div>
                </div> 
                <h1><a href="${pageContext.request.contextPath}/HomePage">Vizualizace přátel na Facebooku</a></h1>
                <div class="user">
                    <img class="userPic" alt="Uvodni foto" src="https://graph.facebook.com/<c:out value="${user.id}"/>/picture?type=square" />
                    <div class="filtr">
                        <a class="filtrIcon"><img alt="icona filtru" src="images/filtrMini.gif" /></a>
                        <div class="filtrPanel">
                            <div class="zobak"></div>

                            <div class="filtrPanelContent">
                                <form method="post" action="${pageContext.request.contextPath}/HomePage">
                                    <div class="filtrGender vse_pohlavi">
                                        <p style="float:right;margin:0;padding:0">
                                            <label for="vse_pohlavi">vše</label>
                                            <input type="checkbox" name="vse_pohlavi" value="1" id="vse_pohlavi" ${empty genderMap || not empty vse_pohlavi ? 'checked' : ''}>
                                        </p> 
                                        <p class="description">Pohlaví:</p>
                                        <select name="gender" multiple="multiple" size="2">
                                            <option value="male" ${empty genderMap || not empty genderMap["male"] ? 'selected' : ''}>Muži</option>
                                            <option value="female" ${empty genderMap || not empty genderMap["female"] ? 'selected' : ''}>Ženy</option>
                                        </select>
                                    </div>
                                    <div class="filtrAge vse_vek">
                                        <p style="float:right;margin:0;padding:0">
                                            <label for="vse_vek">vše</label>
                                            <input type="checkbox" name="vse_vek" value="1" id="vse_vek" ${empty ageFrom || not empty vse_vek ? 'checked' : ''}>
                                        </p> 
                                        <label for="ageRange" class="description">Věk:</label>
                                        <input type="text" name="ageRange" id="ageRange" />
                                        <div id="slider-range"></div>
                                    </div>
                                    <div class="filtrFriendLists vse_skupiny">
                                        <p style="float:right;margin:0;padding:0">
                                            <label for="vse_skupiny">vše</label>
                                            <input type="checkbox" name="vse_skupiny" value="1" id="vse_skupiny" ${empty fListMap || not empty vse_skupiny ? 'checked' : ''}>
                                        </p> 
                                        <p class="description">Skupiny přátel:

                                        </p>
                                        <select name="friendLists" multiple="multiple">
                                            <c:forEach items="${friendLists}" var="fList">
                                                <option value="<c:out value="${fList.id}" />" ${empty fListMap || not empty fListMap[fList.id] ? 'selected' : ''}><c:out value="${fList.name}" /></option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <div class="filtrFriendLst">
                                        <p class="description">Omezit na společné přátelé osoby:

                                        </p>
                                        <select name="uidFriend">
                                            <option value="<c:out value="smaz" />" ${omezeni eq 'Všichni' ? 'selected' : ''}>Všichni</option>                                             
                                            <c:forEach items="${allFriends}" var="friend">
                                                <option value="<c:out value="${friend.uid}" />" ${omezeni eq friend.name ? 'selected' : ''}><c:out value="${friend.name}" /></option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <div class="filtrGraphSize">
                                        <p class="description">Velikost grafu:</p>
                                        <select name="graphWidth">
                                            <option value="1024" ${empty graphWidth || graphWidth == 1024 ? 'selected' : ''}>1024px</option>
                                            <option value="1280" ${graphWidth == 1280 ? 'selected' : ''}>1280px</option>
                                            <option value="1920" ${graphWidth == 1920 ? 'selected' : ''}>1920px</option>
                                            <option value="3000" ${graphWidth == 3000 ? 'selected' : ''}>3000px</option>
                                            <option value="4000" ${graphWidth == 4000 ? 'selected' : ''}>4000px</option>
                                            <option value="5000" ${graphWidth == 5000 ? 'selected' : ''}>5000px</option>
                                        </select>
                                        <span class="times">&times;</span>
                                        <select name="graphHeight">
                                            <option value="800" ${graphHeight == 800 ? 'selected' : ''}>800px</option>
                                            <option value="1000" ${graphHeight == 1000 ? 'selected' : ''}>1000px</option>
                                            <option value="2000" ${graphHeight == 2000 ? 'selected' : ''}>2000px</option>
                                            <option value="3000" ${graphHeight == 3000 ? 'selected' : ''}>3000px</option>
                                            <option value="4000" ${graphHeight == 4000 ? 'selected' : ''}>4000px</option>
                                            <option value="5000" ${empty graphHeight || graphHeight == 5000 ? 'selected' : ''}>5000px</option>
                                            <option value="8000" ${graphHeight == 8000 ? 'selected' : ''}>8000px</option>
                                            <option value="10000" ${graphHeight == 10000 ? 'selected' : ''}>10000px</option>
                                            <option value="15000" ${graphHeight == 15000 ? 'selected' : ''}>15000px</option>
                                        </select>
                                    </div>
                                    <div class="filtrButtons">
                                        <input class="filtrButton" type="submit" name="filtr" value="Odfiltrovat" />
                                    </div>
                                </form>
                            </div>

                        </div>
                    </div>

                    <div class="userName"><c:out value="${user.name}"/></div>
                </div>     


            </div>

        </div>
        <%-- zobrazeni statistik --%>
        <p style="width: 1000px;margin: 0 auto;">
            Zobrazeno: <c:out value="${fn:length(friends)}"/> přátel |
            Průměrný věk: <c:out value="${avgAge}"/> let |
            Výběr: <c:out value="${omezeni}"/>
            <c:if test="${omezeni != 'Všichni'}">
                <a href="${pageContext.request.contextPath}/HomePage?uidFriend=smaz">(Všichni)</a>
            </c:if>

        </p>

        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.1" id="grafPratel" style="width:<c:out value="${graphWidth}"/>px; height:<c:out value="${graphHeight}"/>px">
        <%-- Kvuli Firefoxu - zmensoval okno s SVG vystupem, coz zpusobovalo problemy s drag&drop funkci --%>
        <circle cx="0" cy="0" r="1" fill="white" stroke="white" stroke-width="1" opacity="0"/>  
        <c:forEach items="${friendships}" var="friendship">
            <line x1="<c:out value="${fMap[friendship.uid1].xPosition + (rectangleWidth/2)}"/>" y1="<c:out value="${fMap[friendship.uid1].yPosition + (rectangleHeight/2)}"/>" 
                  x2="<c:out value="${fMap[friendship.uid2].xPosition + (rectangleWidth/2)}"/>" y2="<c:out value="${fMap[friendship.uid2].yPosition + (rectangleHeight/2)}"/>" 
                  class="friend<c:out value="${friendship.uid1}"/>start friend<c:out value="${friendship.uid2}"/>end"
                  style="stroke:black;stroke-width:1"/>
        </c:forEach>

        <c:forEach items="${friends}" var="friend">
            <g id="friend<c:out value="${friend.uid}"/>" class="friend" transform="translate(<c:out value="${friend.xPosition}"/>,<c:out value="${friend.yPosition}"/>)">
            <a xlink:href="${pageContext.request.contextPath}/HomePage?uidFriend=<c:out value="${friend.uid}"/>"><rect  x="-15" y="0" rx="5" ry="5" width="<c:out value="30"/>" height="<c:out value="20"/>" style="fill:black;stroke:black;stroke-width:1;" />
                <text x="-10" y="15"
                      font-family="Helvetica" font-size="16" 
                      fill="white" > 
                +
                </text></a>

            <rect x="0" y="0" rx="5" ry="5" width="<c:out value="${rectangleWidth}"/>" height="<c:out value="${rectangleHeight}"/>" style="fill:<c:choose>
                      <c:when test="${friend.gender == 'female'}">#${omezeni eq friend.name ? 'b82215' : 'EC6357'} </c:when>
                      <c:when test="${friend.gender == 'male'}">#${omezeni eq friend.name ? '27477f' : '8EAADC'} </c:when>
                      <c:otherwise>gray</c:otherwise>
                  </c:choose>;stroke:black;stroke-width:1;" />


            <image xlink:href="https://graph.facebook.com/<c:out value="${friend.uid}"/>/picture?type=square" x="5" y="5" height="60px" width="60px"/>


            <switch>
            <foreignObject x="5" y="65" width="60" height="30" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
            <p class="friendName"><c:out value="${friend.name}"/></p>
            </foreignObject>

            <text x="5" y="60"
                  font-family="Helvetica" font-size="12" 
                  fill="blue" > 
            Cannot display html.
            </text>
            </switch>


            </g>
        </c:forEach>


        </svg>  

    </body>
</html> 
